<template>
	<view class="w-100 bg-white">
		<view class="promotion-head">
			<view class="bg-img">
				<image src="https://test.createbei.com/files/common/14597797_9494.png" mode="widthFix"></image>
			</view>
			<view class="to-back iconfont icon-back2-01" @click="toBack">返回</view>
			<view class="promotion-title font-s-8 text-main-color font-w">贝创网赚平台</view>
		</view>
		<view class="flex-1 row-ac">
			<view class="user-img ml-5">
				<image :src="userInfo.head_image" mode=""></image>
			</view>
			<view class="flex-1 ml-7">
				<view class="font-s-5" v-if="userInfo.duties_name">
					<view class="text-light-grey font-s-3">身份</view>
					<view class="mt-1">{{ userInfo.duties_name }}</view>
				</view>
				<view class="font-s-5 mt-2">
					<view class="text-light-grey font-s-3">姓名</view>
					<view class="mt-1">{{ userInfo.last_name || userInfo.nickname || userInfo.username }}</view>
				</view>
				<view class="font-s-4 mt-2 text-light-grey">
					<view class="font-s-3">注册时间</view>
					<view class="mt-1">{{ userInfo.date_joined }}</view>
				</view>
			</view>
		</view>
		<view class="flex-1 row-a-j-fc mt-9">
			<view class="font-s-4 font-w">邀请二维码</view>
			<view class="font-s-3 mt-1 text-light-grey">跟着我一起赚点零花钱吧</view>
			<view class="code-img mt-5">
				<image :src="mkqrcode" mode="widthFix"></image>
			</view>
			<view class="font-s-4 mt-3 " @click="saveImage">保存二维码</view>
		</view>
	</view>
</template>

<script>
	import {
		userInfoUrl,
		usermkqrcodeUrl
	} from '@/api/index.js';
	import {
		nowFormatTime,
	} from '@/utils/time.js';
	export default {
		data() {
			return {
				userInfo: '',
				mkqrcode: ''
			}
		},
		filters: {
			phoneFilter(val) {
				let reg = /^(.{3}).*(.{4})$/;
				return val.replace(reg, "$1****$2");
			},
		},
		mounted() {
			this.token = uni.getStorageSync('token')
			if (this.token != '') {
				this.loginStatus = true
				this.getUserInfo()
				this.getUsermkqrCode()
			} else {
				this.loginStatus = false
			}
		},
		methods: {
			getUserInfo() {
				this.$R.get(userInfoUrl).then(res => {
					this.userInfo = res.data
					this.userInfo.date_joined = nowFormatTime(res.data.date_joined)
				})
			},
			getUsermkqrCode() {
				this.$R.get(usermkqrcodeUrl).then(res => {
					this.mkqrcode = res.qr_image
					console.log(res);
				})
			},
			saveImage() {
				let base64 = this.mkqrcode;
				const bitmap = new plus.nativeObj.Bitmap("base64");
				bitmap.loadBase64Data(base64, function() {
					const url = "_doc/" + new Date().getTime() + ".png";
					console.log('saveHeadImgFile', url)
					bitmap.save(url, {
						overwrite: true, // 是否覆盖
						// quality: 'quality'  // 图片清晰度
					}, (i) => {
						uni.saveImageToPhotosAlbum({
							filePath: url,
							success: function() {
								setTimeout(() => {
									uni.showToast({
										title: '图片保存成功',
										icon: 'none'
									})
								}, 400);
								bitmap.clear()
							}
						});
					}, (e) => {
						uni.showToast({
							title: '图片保存失败',
							icon: 'none'
						})
						bitmap.clear()
					});
				}, (e) => {
					uni.showToast({
						title: '图片保存失败',
						icon: 'none'
					})
					bitmap.clear()
				});
			},
			toBack() {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff !important;
	}

	.promotion-head {
		position: relative;

		.to-back {
			position: absolute;
			top: 90rpx;
			left: 30rpx;
		}

		.promotion-title {
			top: 150rpx;
			right: 90rpx;
			position: absolute;
		}
	}

	.user-img {
		width: 238rpx;
		height: 238rpx;
		border-radius: 50%;
		border: 20rpx solid #D2D2D2;

		image {
			width: 238rpx;
			height: 238rpx;
			border-radius: 50%;
		}
	}

	.code-img {
		width: 380rpx;
		height: 380rpx;
	}

	.head-image {
		width: 72rpx;
		height: 72rpx;
		border-radius: 50%;

		image {
			width: 72rpx;
			height: 72rpx;
			border-radius: 50%;
		}
	}
</style>